<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        <label style="margin-right: 15px;">员工姓名:</label>
        <el-input v-model="name" placeholder="请输入员工姓名" style="width: 15%;" clearable />
        <el-button type="primary" style="margin-left: 20px;" @click = "pageQuery()">查询</el-button>
        <el-button type="primary" style="float: right;" @click = "handleAddEmp()">+添加员工</el-button>
      </div>

      <el-table :data="records" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="username" label="账号" width="180"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="status" label="账号状态">
        <template v-slot="scope">
          {{ scope.row.status === 0 ? '禁用' : '启用' }}
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="最后操作时间"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="text" @click = 'handleUpdateEmp(scope.row)'>修改</el-button>
          <el-button type="text" @click = "handleStartOrStop(scope.row)">{{ scope.row.status === 0 ? '启用' : '禁用' }}</el-button>
        </template>
      </el-table-column>      
    </el-table>
      <el-pagination
      class = "pageList"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[1, 5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
  </div>
</template>
<script lang="ts">

import { getEmployeeList, enableOrDisableEmployee } from '@/api/employee';
import { status } from 'nprogress';
export default  {
  //模型数据
  data() {
    return {
      name: '',//员工姓名
      page: 1,//页码
      pageSize: 10,//每页记录数
      total: 0,//总记录数
      records: []//当前页要展示的数据集合
    }
  },

    created() {
    this.pageQuery()
  },

  methods: {
    //分页查询 向后端发送请求
    pageQuery(){
      //准备参数
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        name: this.name
      }

      //调用方法发送请求，并获取返回结果
      getEmployeeList(params)
      .then((res) => {
        //解析结果
        if(res.data.code === 1){
          this.records = res.data.data.records
          this.total = res.data.data.total
        }
      })
      .catch((err) => {
        this.$message.error("请求出错了" + err.message);
      }) 
    },

    //每页记录数发生改变
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageQuery()
    },
    //页码发生改变
    handleCurrentChange(page) {
      this.page = page
      this.pageQuery()
    },
    //启用、禁用员工账号
    handleStartOrStop(row){
      //管理员账号不能禁用
      if(row.username === 'admin'){
        this.$message.error("admin为系统管理员账号，不能更改账号状态！")
        return
      }

      this.$confirm('此操作将修改员工账号状态, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //普通员工账号可以修改，调用enableOrDisableEmployee()
          //参数准备
          const p = {
          id: row.id,
          status: !row.status ? 1 : 0
        }

        enableOrDisableEmployee(p).then(res => {
        if(res.data.code ===1 ){
          this.$message.success('员工的账号状态修改成功！')
          this.pageQuery()
        }
      })
    })
    },
    //添加员工
    handleAddEmp(){
      //跳转到添加员工组件页面
      this.$router.push('/employee/add')
    },
    //修改员工信息
    handleUpdateEmp(row){
      if(row.username === 'admin'){
        this.$message.error('admin为系统的管理员账号，不能修改！')
        return 
      }

      //跳转到修改页面，通过地址栏传递参数
      this.$router.push({
        path: '/employee/add',
        query: {id: row.id}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled-text {
  color: #bac0cd !important;
}
</style>
